﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>空运</title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s4-2/bg.jpg');
            background-repeat: no-repeat;
        }
        text {
            font: 10px sans-serif;
            text-anchor: middle;
            fill: white;
        }
    </style >
    <link rel="stylesheet" type="text/css" href="images/s4-2/css/anlimate.css" />
    <script src="./assets/echarts.min.js"></script>
    <script src="./assets/world.js"></script>
    <script src="./assets/d3.v4.min.js"></script>
    <script src="./assets/jquery.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.local.js"></script>
</head>
<body>
    <div id="box">
        <div class="plane1">
            <img src="./images/s4-2/img/nh-R.png" />
        </div>
        <div class="plane1a">
            <img src="./images/s4-2/img/gh-R.png" />
        </div>
        <div class="plane1b">
            <img src="./images/s4-2/img/ML_R.png" />
        </div>

        <div class="plane2">
            <img src="./images/s4-2/img/ALQ.png" /> >
        </div>
        <div class="plane2a">
            <img src="./images/s4-2/img/CR.png" />
        </div>
        <div class="plane2b">
            <img src="./images/s4-2/img/DH.png" />
        </div>

        <div class="plane3">
            <img src="./images/s4-2/img/DH.png" />
        </div>
        <div class="plane3a">
            <img src="./images/s4-2/img/HS.png" />
        </div>
        <div class="plane3b">
            <img src="./images/s4-2/img/MLH.png" />
        </div>
        <div class="plane4">
            <img src="./images/s4-2/img/GHH.png" />
        </div>
        <div class="plane4a">
            <img src="./images/s4-2/img/NH.png" />
        </div>
    </div>
    <canvas id="cavans2" style="position:absolute;top:0px; left:0px;" width='1920' height='1080'></canvas>
    <script src="./content/s0-charts.js"></script>
    <script src="./content/s0-event.js"></script>
    <script>
        var _cxt = null;
        var g_interval = 30;
        var g_size = { w: 1920, h: 1080 };
        var g_dataList = [];

        var g_stepCurrent = -1;
        var g_stepMax = 10;
        
        var g_posCurrent = 0;
        var g_posMax = 3;
        var g_isShowPosDesc = false;
        //  步骤切换时间
        var g_stepInterval = 4000;

        var g_posMaxValue = [251, 20, 32];
        function JzTimer(interval, callback){
            this.interval = interval;
            this.callback = callback;
            this.ticks = 0;
            this.update = function (delta) {
                this.ticks += delta;
                if (this.ticks > this.interval) {
                    this.ticks = 0;
                    this.callback();
                }
                for (var index = 0; index < this._children.length; index++) {
                    this._children[index].update(delta);
                }
            };

            // common
            this._children = [];
            this.addChild = function (child) {
                this._children.push(child);
            };
            this.addChildRange = function (children) {
                for (var index = 0; index < children.length; index++) {
                    this._children.push(children[index]);
                }
            };
        };

        function JzWaitTimer(time) {
            this._isRuning = false;
            this._time = time;
            this._ticks = 0;
            this.update = function (delta) {
                if (this._isRuning) {
                    this._ticks += delta;
                }
            }

            // 判断读秒是否完成，true：需要等待，false：完成
            this.wait = function () {
                if (this._ticks > this._time) {
                    this._isRuning = false;
                    return false;
                }
                return true;
            }
            // 启动读秒
            this.start = function () {
                this._isRuning = true;
            }
            // 重置时间但是启动读秒
            this.reset = function () {
                this._ticks = 0;
                this._isRuning = false;
            }
        }

        var g_animations = [];
        function Plane() {
            this._animationArr = [];
            this.addAnimation = function (animation) {
                this._animationArr.push(animation);
            }
            this.update = function (delta) {
                for (var index = 0; index < g_animations.length; index++) {
                    g_animations[index].update(delta);
                }
            }
        }
        function JzAniMoveTo(node, duration, targetPos) {
            this._duration = duration;
            this._targetPos = targetPos;

            this.update = function (delta) {

            }
        }

        function updatePlane() {
            var plane = g_planeArr[g_posCurrent];
            var step = g_stepCurrent;
            if (step < 0) {
                step = 0;
            }
            if (step == g_stepMax - 1) {
                return;
            }
            else {
                var curPos = g_planePosArr[step];
                var targetPos = g_planePosArr[step + 1];
                var speedX = (targetPos[0] - curPos[0]) / g_stepInterval;
            }
        }
        var g_wait = new JzWaitTimer(3000);
        var g_wtStep = new JzWaitTimer(g_stepInterval);
        var g_timer = new JzTimer(10, function () {
            g_wtStep.start();
            if (g_wtStep.wait()) {
                updatePlane();
                return;
            }
            g_wtStep.reset();
            g_stepCurrent++;
            if (g_stepCurrent >= g_stepMax - 1) {
                g_wait.start();
                if (g_wait.wait()) {
                    g_stepCurrent = g_stepMax - 1;
                    g_isShowPosDesc = true;
                } else {
                    g_wait.reset();
                    g_stepCurrent = -1;
                    g_isShowPosDesc = false;

                    // 重置值
                    for (var index = 0; index < g_nodeArr.length; index++) {
                        g_nodeArr[index].data.value = 0;
                        //g_nodeArr[index].data.targetValue = 0;
                    }

                    g_posCurrent++;
                    if (g_posCurrent >= g_posMax) {
                        g_posCurrent = 0;
                    }
                }
            }

            for (var index = 0; index < g_posArr.length; index++) {
                if (index == g_posCurrent) {
                    g_posArr[index].show = true;
                    g_posDescArr[index].show = true;
                } else {
                    g_posArr[index].show = false;
                    g_posDescArr[index].show = false;
                }
            }

            for (var index = 0; index < g_nodeArr.length; index++) {
                if (index == g_stepCurrent) {
                    g_nodeArr[index].data.isUpdateValue = true;
                }
                if (index <= g_stepCurrent) {
                    g_nodeArr[index].isActived = true;
                } else {
                    g_nodeArr[index].isActived = false;
                }
            }
        });
        g_timer.addChildRange([g_wait, g_wtStep]);

        var g_planePosArr = [[110, 376], [298, 376], [486, 376], [677, 376], [865, 376], [1054, 376], [1242, 376], [1425, 376], [1612, 376], [1798, 376]];
        var g_planeArr = [{
            size: { w: 308, h: 56 },
            offset: { x: 145, y: 30 }, url: './images/s4-2/p0-plane.png'
        }, {
            size: { w: 308, h: 56 },
        offset: { x: 145, y: 30 }, url: './images/s4-2/p1-plane.png'
        }, {
            size: { w: 308, h: 56 },
            offset: { x: 145, y: 30 }, url: './images/s4-2/p2-plane.png'
        }];
        var g_sActiveBGTex2D = null;
        var g_nodeArr = [{
            show: true,
            pos: { x: 51, y: 129 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s0-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 236, y: 138 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s1-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 426, y: 150 },
        offset: { x: 0, y: 0 },
        size:{w:124,h:132},
            url: './images/s4-2/s2-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 613, y: 164 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s3-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 802, y: 208 },
        offset: { x: 0, y: 0 },
        size:{w:124,h:132},
            url: './images/s4-2/s4-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 990, y: 207 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s5-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 1177, y: 164 },
        offset: { x: 0, y: 0 },
        size:{w:124,h:132},
            url: './images/s4-2/s6-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 1367, y: 150 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s7-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 1553, y: 137 },
        offset: { x: 0, y: 0 },
        size:{w:124,h:132},
            url: './images/s4-2/s8-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 1743, y: 127 },
            offset: { x: 0, y: 0 },
            size: { w: 124, h: 132 },
            url: './images/s4-2/s9-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0,
                isUpdateValue: false
            },
            isActived: false
        }];

        
        var g_posArr = [{
            show: false,
            pos: { x: 828, y: 597 },
            offset: { x: 0, y: 0 },
            size: { w: 43, h: 22 },
            url: './images/s4-2/pos-bg.png'
        }, {
            show: false,
            pos: { x: 857, y: 587 },
            offset: { x: 0, y: 0 },
            size: { w: 43, h: 22 },
            url: './images/s4-2/pos-bg.png'
        }, {
            show: false,
            pos: { x: 772, y: 625 },
            offset: { x: 0, y: 0 },
            size: { w: 43, h: 22 },
            url: './images/s4-2/pos-bg.png'
        }];

        var g_posDescArr = [{
            show: false,
            pos: { x: 102, y: 260 },
            offset: { x: 0, y: 0 },
            url: './images/s4-2/p0-desc.png'
        }, {
            show: false,
            pos: { x: 102, y: 260 },
            offset: { x: 0, y: 0 },
            url: './images/s4-2/p1-desc.png'
        }, {
            show: false,
            pos: { x: 102, y: 260 },
            offset: { x: 0, y: 0 },
            url: './images/s4-2/p2-desc.png'
        }];

        var g_layerArr = [{
            pos: { x: 47, y: 687 },
            url: './images/s4-2/s4-2-layer1.png'
        }, {
            pos: { x: 1489, y: 686 },
            url: './images/s4-2/s4-2-layer2.png'
        }];
        function init() {
            _cxt = document.getElementById('cavans2').getContext("2d");
            
            g_sActiveBGTex2D = new Image();
            g_sActiveBGTex2D.src = jzcode.res.getUrl('./images/s4-2/s-active-bg.png');

            for (var index = 0; index < g_planeArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_planeArr[index].url);
                g_planeArr[index].tex2D = image;
            }

            for (var index = 0; index < g_layerArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_layerArr[index].url);
                g_layerArr[index].tex2D = image;
            }

            for (var index = 0; index < g_posArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_posArr[index].url);
                g_posArr[index].tex2D = image;
            }
            for (var index = 0; index < g_posDescArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_posDescArr[index].url);
                g_posDescArr[index].tex2D = image;
            }

            for (var index = 0; index < g_nodeArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_nodeArr[index].url);
                g_nodeArr[index].tex2D = image;
            }

            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].data) {
                    g_dataList.push({ tag: g_nodeArr[index].data, url: g_nodeArr[index].data.url, waiting: 3600000, isLoading: false });
                }
            }

            window.setInterval(function () {
                Render();
                DataLoop(g_interval);
                g_timer.update(g_interval);
            }, g_interval);
        }

        function Render() {
            for (var index = 0; index < g_animations.length; index++) {
                g_animations[index].update(g_interval);
            }

            _cxt.clearRect(0, 0, g_size.w, g_size.h);

            for (var indexOfNode = 0; indexOfNode < g_nodeArr.length; indexOfNode++) {
                if (g_nodeArr[indexOfNode].show) {

                    if (g_nodeArr[indexOfNode].isActived) {
                        
                        _cxt.drawImage(g_sActiveBGTex2D,
                            g_nodeArr[indexOfNode].pos.x - g_nodeArr[indexOfNode].offset.x - 28,
                            g_nodeArr[indexOfNode].pos.y - g_nodeArr[indexOfNode].offset.y - 30);
                    }

                    _cxt.drawImage(g_nodeArr[indexOfNode].tex2D,
                        g_nodeArr[indexOfNode].pos.x - g_nodeArr[indexOfNode].offset.x,
                        g_nodeArr[indexOfNode].pos.y - g_nodeArr[indexOfNode].offset.y);
                }
            }

            if (g_isShowPosDesc == true) {
                for (var indexOfNode = 0; indexOfNode < g_posDescArr.length; indexOfNode++) {
                    if (g_posDescArr[indexOfNode].show) {
                        _cxt.drawImage(g_posDescArr[indexOfNode].tex2D,
                            g_posDescArr[indexOfNode].pos.x - g_posDescArr[indexOfNode].offset.x,
                            g_posDescArr[indexOfNode].pos.y - g_posDescArr[indexOfNode].offset.y);
                    }
                }
            }

            for (var indexOfNode = 0; indexOfNode < g_posArr.length; indexOfNode++) {
                if (g_posArr[indexOfNode].show) {
                    _cxt.drawImage(g_posArr[indexOfNode].tex2D,
                        g_posArr[indexOfNode].pos.x - g_posArr[indexOfNode].offset.x,
                        g_posArr[indexOfNode].pos.y - g_posArr[indexOfNode].offset.y);
                }
            }

            // 显示飞机
            if (g_stepCurrent > -1) {
                _cxt.drawImage(g_planeArr[g_posCurrent].tex2D,
                    g_planePosArr[g_stepCurrent][0] - g_planeArr[g_posCurrent].offset.x,
                    g_planePosArr[g_stepCurrent][1] - g_planeArr[g_posCurrent].offset.y);
            }

            _cxt.textBaseline = 'top';
            _cxt.fillStyle = '#FFF';
            _cxt.font = '30px Arial';
            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].data) {
                    var nodeData = g_nodeArr[index].data;
                    if (g_nodeArr[index].data.isUpdateValue) {
                        if (g_nodeArr[index].data.targetValue && g_nodeArr[index].data.value != g_nodeArr[index].data.targetValue) {
                            g_nodeArr[index].data.value += g_nodeArr[index].data.intervalValue;
                            if (nodeData.intervalValue > 0 && g_nodeArr[index].data.value > g_nodeArr[index].data.targetValue) {
                                g_nodeArr[index].data.value = g_nodeArr[index].data.targetValue;
                                g_nodeArr[index].data.isUpdateValue = false;
                            } else if (nodeData.intervalValue < 0 && nodeData.value < nodeData.targetValue) {
                                nodeData.value = nodeData.targetValue;
                                g_nodeArr[index].data.isUpdateValue = false;
                            }
                        }
                    }
                    var number = parseInt(g_nodeArr[index].data.value);
                    var length = _cxt.measureText(number);
                    _cxt.fillText(number, g_nodeArr[index].pos.x + (g_nodeArr[index].size.w - length.width) / 2,
                        g_nodeArr[index].pos.y + (g_nodeArr[index].size.h / 5 * 3));
                }
            }

            for (var indexOfNode = 0; indexOfNode < g_layerArr.length; indexOfNode++) {
                _cxt.drawImage(g_layerArr[indexOfNode].tex2D,
                    g_layerArr[indexOfNode].pos.x,
                    g_layerArr[indexOfNode].pos.y);
            }

            _cxt.textBaseline = 'top';
            _cxt.fillStyle = '#FFF';
            _cxt.font = '40px Arial';
            var timeString = getNowFormatYYMMDDHHMM();
            var timeLength = _cxt.measureText(timeString);
            _cxt.fillText(timeString, 1920 - timeLength.width - 50, 40);
        }

        // 循环处理数据请求
        function DataLoop(delta) {
            for (var index = 0; index < g_dataList.length; index++) {
                if (g_dataList[index].waiting >= 10000 && !g_dataList[index].isLoading) {
                    var dataEndpoint = g_dataList[index];
                    ajaxToServer(dataEndpoint);
                } else {
                    g_dataList[index].waiting += delta;
                }
            }
        }

        function ajaxToServer(dataEndpoint) {
            // 发送请求到服务器
            dataEndpoint.waiting = 0;
            dataEndpoint.isLoading = true;
            $.ajax({
                url: dataEndpoint.url,
                type: 'GET',
                dataType: 'json',
                timeout: 60000,
                cache: false,
                beforeSend: function () {
                }, //加载执行方法
                error: function () {
                    dataEndpoint.isLoading = false;
                },  //错误执行方法
                success: function (result) {
                    if (result.isSuccess) {
                        // 设置一个目标值，让动画来渐变
                        dataEndpoint.tag.targetValue = 10 + Math.random() * (g_posMaxValue[g_posCurrent] - 10);
                        if (dataEndpoint.tag.targetValue != dataEndpoint.tag.value) {
                            dataEndpoint.tag.intervalValue = (dataEndpoint.tag.targetValue - dataEndpoint.tag.value) / 2000 * g_interval;
                            if (dataEndpoint.tag.intervalValue > 0 && dataEndpoint.tag.intervalValue < 1) {
                                dataEndpoint.tag.intervalValue = 1;
                            }
                            else if (dataEndpoint.tag.intervalValue < 0 && dataEndpoint.tag.intervalValue > -1) {
                                dataEndpoint.tag.intervalValue = -1;
                            }
                        }
                    }
                    dataEndpoint.isLoading = false;
                }//成功执行方法
            })
        }

        function getNowFormatYYMMDDHHMM() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var strHour = date.getHours();
            var strMinutes = date.getMinutes();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (strHour >= 0 && strHour <= 9) {
                strHour = "0" + strHour;
            }
            if (strMinutes >= 0 && strMinutes <= 9) {
                strMinutes = "0" + strMinutes;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + strHour + seperator2 + strMinutes;
            return currentdate;
        }
        init();
    </script>
    <script>
        $(document).ready(function () {
            register();
        });
    </script>
</body>
</html>